<template>
  <div class="temp-contain">
    <Button type="primary" size="small" @click="onAdd" class="temp-btn">新建店铺运费模板</Button>
    <div class="item">
      <Alert type="info"><Icon class="icon" type="ios-alert" />未被划分的收货地区按默认模板的计费规则计费，需指定地区计费的可新建店铺模板设置，店铺运费模板全店使用，不需要绑定商品。商品运费（默认模板不可删除，未被划分的经销商自动归于默认模板）</Alert>
      <homeTable
        :translate="130"
        :list="list"
        @getData="getData"
        @onPageSizeChange="onPageSizeChange"
        @onPageChange="onPageChange"
      />
    </div>
    <AddShop ref="add-shop" @onFinish="getData"/>
  </div>
</template>
<script>
import ShopTempData from './../edit/ShopTempData'
import homeTable from "~/homeTable"
import AddShop from './../edit/AddShop'
export default {
  components: {
    homeTable,
    AddShop
  },
  data() {
    return {
      list: ShopTempData
    }
  },
  mounted() {
    this.$bus.$on('onEditShop', ({row}) => this.onEdit(row))
    this.$bus.$on('onOpenShop', ({row}) => this.onOpen(row))
    this.getData()
  },
  destroyed() {
    this.$bus.$off()
  },
  methods: {
    getData() {
      let params = {
        freightType: 2,
        current: this.list.currentPage,
        size: this.list.pageSize
      }
      this.list.status = 'loading'
      this.$jsonPost('/freight/setting/page', params).then(data => {
        this.list.status = 'pass'
        this.list.totalItem = Number(data.total)
        this.list.data = (data.records || []).map(item => {
          return {
            ...item,
            ...item.freightTemplateItemDTOS[0],
            id: item.id
          }
        })
      }).catch(() => {
        this.list.status = 'error'
      })
    },
    onAdd() {
      this.$refs['add-shop'].updateForm()
    },
    onPageSizeChange(pageSize) {
      this.list.currentPage = 1
			this.list.pageSize = pageSize
			this.$router.push({
				name: "operation/caggiage/list"
			})
			this.getData()
    },
    onPageChange(number) {
      this.list.currentPage = number
			this.$router.push({
				name: "operation/caggiage/list"
			})
      this.getData()
    },
    onOpen(row) {
      let content = row.isEnabled ? '模版禁用后会把已绑定该模版的商品取消绑定，确定要禁用吗' : '确定要启用吗'
      this.$Modal.confirm({
        title: "确认",
        content: content,
        onOk: () => {
          let params = {
            id: row.id,
            enable: !row.isEnabled
          }
          this.$ajaxPost('/freight/setting/enable', params).then(() => {
            this.$Notice.success({
              title: '操作成功'
            })
            this.$set(this.list.data[row._index], 'isEnabled', !row.isEnabled)
          })
        }
      })
    },
    onEdit(row) {
      this.$refs['add-shop'].updateForm(row.id, row.isSystemed, row.freightTemplateId)
    }
  }
}
</script>